<!DOCTYPE html>
<html>
  <head>
    <script
      async
      src="https://www.googletagmanager.com/gtag/js?id=G-86QMDH8ZNH"
    ></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag() {
        dataLayer.push(arguments);
      }
      gtag("js", new Date());
      gtag("config", "G-86QMDH8ZNH");
    </script>
    <title>Pyxel Web Launcher</title>
    <script src="https://cdn.jsdelivr.net/gh/kitao/pyxel/wasm/pyxel.js"></script>
  </head>
  <body class="pyxel-scheme">
    <script>
      function printUsage() {
        document.body.innerHTML = `
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
          <h1>Pyxel Web Launcher</h1>
          <p>
            Launcher tool for the WebAssembly version of
            <a href="https://github.com/kitao/pyxel">Pyxel</a>, a retro game engine
            for Python.
          </p>
          <table>
            <tr>
              <td style="width: 15em">Startup File URL on GitHub</td>
              <td><input type="text" size="60" id="startup-file" /></td>
            </tr>
            <tr>
              <td>Enable Virtual Gamepad</td>
              <td><input type="checkbox" id="virtual-gamepad" checked /></td>
            </tr>
            <tr>
              <td>Additional Packages</td>
              <td><input type="text" size="60" id="additional-packages" /></td>
            </tr>
            <tr>
              <td>Application Launch URL</td>
              <td>
                <b><a href="" target="_blank" id="launch-url"></a></b>
              </td>
            </tr>
          </table>
          <ul>
            <li>
              Startup file type should be .pyxapp or .py like<br /><a
                href="https://github.com/kitao/pyxel/blob/main/python/pyxel/examples/megaball.pyxapp"
                >https://github.com/kitao/pyxel/blob/main/python/pyxel/examples/megaball.pyxapp</a
              >
            </li>
            <li>
              Only
              <a href="https://pyodide.org/en/stable/usage/packages-in-pyodide.html"
                >packages supported by Pyodide</a
              >
              can be used as additonal packages
            </li>
            <li>
              If there are multiple additional packages, separate them with commas
              like a,b,c
            </li>
          </ul>
          <p>
            For specific instructions, please refer to
            <a href="https://github.com/kitao/pyxel/wiki/How-To-Use-Pyxel-Web"
              >this page</a
            >.
          </p>
        `;
        document
          .getElementById("startup-file")
          .addEventListener("input", generateLaunchUrl);
        document
          .getElementById("virtual-gamepad")
          .addEventListener("change", generateLaunchUrl);
        document
          .getElementById("additional-packages")
          .addEventListener("input", generateLaunchUrl);
      }

      function generateLaunchUrl() {
        const startupFile = document.getElementById("startup-file").value;
        const virtualGamepad =
          document.getElementById("virtual-gamepad").checked;
        const additionalPackages = document.getElementById(
          "additional-packages"
        ).value;
        const launchUrlHref = document.getElementById("launch-url");
        launchUrlHref.textContent = launchUrlHref.href = "";
        if (
          !startupFile.startsWith("https://github.com/") ||
          !(startupFile.endsWith(".py") || startupFile.endsWith(".pyxapp")) ||
          additionalPackages.match(/[^a-zA-Z0-9,]/)
        ) {
          return;
        }
        const paths = startupFile.split("/");
        const dottedPath = paths.slice(3, 5).concat(paths.slice(7)).join(".");
        const filePath = dottedPath.split(".").slice(0, -1).join(".");
        const fileExt = dottedPath.split(".").slice(-1)[0];
        var launchUrl = "https://kitao.github.io/pyxel/wasm/launcher/?";
        launchUrl += fileExt == "py" ? "run" : "play";
        launchUrl += "=" + filePath;
        if (virtualGamepad) {
          launchUrl += "&gamepad=enabled";
        }
        if (additionalPackages != "") {
          launchUrl += "&packages=" + additionalPackages;
        }
        launchUrlHref.textContent = launchUrlHref.href = launchUrl;
      }

      let queries = new URL(document.location).searchParams;
      let command, paths, ext;
      if (queries.get("run")) {
        command = "run";
        paths = queries.get("run").split(".");
        ext = ".py";
      } else if (queries.get("play")) {
        command = "play";
        paths = queries.get("play").split(".");
        ext = ".pyxapp";
      } else if (queries.get("edit")) {
        command = "edit";
        paths = queries.get("edit").split(".");
        ext = ".pyxres";
      } else {
        printUsage();
      }
      if (command) {
        launchPyxel({
          root: "https://cdn.jsdelivr.net/gh/" + paths.slice(0, -1).join("/"),
          command: command,
          name: paths[paths.length - 1] + ext,
          packages: queries.get("packages"),
          gamepad: queries.get("gamepad"),
          editor: queries.get("editor"),
        });
      }
    </script>
  </body>
</html>
